<template>
  <div>
    <h1>薪资：{{ salary }}</h1>
    <h2>
      工龄：{{ info.workAge }}
      <button @click="updateAge">点击增加工龄</button>
    </h2>
    <h3>
      等级：{{ info.title.lev }}
      <button @click="updeteLev">点击提升等级</button>
    </h3>

    <hr />
    <h2>{{ num1 }} <button @click="num1++">自增</button></h2>
    <h2>{{ num2 }} <button @click="num2++">自增</button></h2>
    <h2>{{ number }}</h2>
  </div>
</template>
<script setup>
import {
  watchEffect,
  ref,
  reactive,
  readonly,
  shallowReadonly,
  toRef,
  toRaw,
  markRaw,
  triggerRef,
  shallowRef
} from "vue";

const salary = ref(10);
const num1 = ref(10);
const num2 = ref(20);
const number = ref(30);
// markRaw()将原始对象标记为不可代理（只有根对象被标记上）
const info = shallowRef(
  {
    workAge: 0,
    title: {
      name: "教授",
      lev: 1,
      sum: {
        um: 10,
        mum: {
          l: 10,
        },
      },
    },
  }
);
console.log(info);

// 更新info数据
function updeteLev() {
  info.value.title.lev++;
  //强制数据流向页面
  triggerRef(info)
  console.log(info.value.title.lev);
}
function updateAge(){
    info.value.workAge++
     //强制数据流向页面
  triggerRef(info)
    console.log(info.value.workAge);
}

watchEffect(() => {
  salary.value = 10 +info.value.workAge * 0.1 + ( info.value.title.lev - 1) * 0.5;
  number.value = num1.value + num2.value;
});

</script>